<template>
	<el-card class="box-card" v-if="orderInfo">
		<template #header>
			<span class="title">挂号详情</span>
		</template>
		<div class="top">
			<div class="left">
				<el-tag type="success" effect="dark">
					<div class="tag">
						<el-icon class="icon"><Check /></el-icon>
						<span>{{ orderInfo.param.orderStatusString }}</span>
					</div>
				</el-tag>
			</div>
			<div class="right">
				<img src="../../../../assets/images/code_app.png" alt="" />
				<p>
					微信
					<svg
						t="1692113941889"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="8704"
						width="14"
						height="14">
						<path
							d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
							fill="#09BB07"
							p-id="8705"></path>
					</svg>
					关注 “北京114预约挂号” “快速预约挂号”
				</p>
			</div>
		</div>
		<el-row class="bottom">
			<el-col :span="10" class="patient_info_box">
				<el-descriptions class="patient_info" :column="1" border>
					<el-descriptions-item label="就诊人姓名:">{{ orderInfo.patientName }}</el-descriptions-item>
					<el-descriptions-item label="就诊日期:">
						{{ orderInfo.reserveDate }}
						{{ orderInfo.reserveTime === 0 ? '上午' : '下午' }}
					</el-descriptions-item>
					<el-descriptions-item label="就诊医院:">{{ orderInfo.hosname }}</el-descriptions-item>
					<el-descriptions-item label="就诊科室:">{{ orderInfo.depname }}</el-descriptions-item>
					<el-descriptions-item label="医生职称:">{{ orderInfo.title }}</el-descriptions-item>
					<el-descriptions-item label="挂号单号:">{{ orderInfo.outTradeNo }}</el-descriptions-item>
					<el-descriptions-item label="挂号时间:">{{ orderInfo.createTime }}</el-descriptions-item>
					<el-descriptions-item label="医事服务费:">
						<span class="text_red">{{ orderInfo.amount }}</span>
					</el-descriptions-item>
				</el-descriptions>
				<div class="but">
					<el-popconfirm
						width="160"
						title="确定取消预约吗?"
						@confirm="cancel"
						v-if="orderInfo.orderStatus === 0 || orderInfo.orderStatus === 1">
						<template #reference>
							<el-button>取消预约</el-button>
						</template>
					</el-popconfirm>

					<el-button type="primary" v-if="orderInfo.orderStatus === 0" @click="payment">支付</el-button>
				</div>
			</el-col>
			<el-col :span="14">
				<div class="precautions">
					<h3>注意事项</h3>
					<ol>
						<li>请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</li>
						<li>
							【取号】就诊当天需在{{ orderInfo.fetchTime }}前前 在医院取号，未取号视为爽约，该号不退不换；
						</li>
						<li class="text_red">
							【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；
						</li>
						<li>
							北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
						</li>
						<li>请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</li>
					</ol>
				</div>
			</el-col>
		</el-row>
		<el-dialog v-model="dialogVisible" title="微信支付" width="400px" @closed="onclosed">
			<div class="payment">
				<img :src="imgURL" alt="" v-if="imgURL" />
				<p v-else>加载中……</p>
				<p>请使用微信扫一扫</p>
				<p>扫描二维码支付</p>
			</div>
		</el-dialog>
	</el-card>
</template>

<script setup lang="ts">
import { Check } from '@element-plus/icons-vue';
import { getOrderInfo, orderCancel, getQrcode, payResult } from '@/api/user';
import { OrderInfo } from '@/api/user/type';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
// @ts-ignore
import QRCode from 'qrcode';

const route = useRoute();

let orderInfo = ref<OrderInfo | undefined>();

let dialogVisible = ref(false);

let imgURL = ref('');

let timer: NodeJS.Timeout;

// 获取订单信息
function getOrderInfoFn() {
	getOrderInfo(route.query.orderId as unknown as number).then((res) => {
		if (res.code === 200) {
			orderInfo.value = res.data;
		}
	});
}

// 取消订单
function cancel() {
	orderCancel(route.query.orderId as unknown as number).then(
		(res) => {
			if (res.ok) {
				getOrderInfoFn();
			} else {
				ElMessage.error(res.message);
			}
		},
		() => {}
	);
}

// 支付回调
function payment() {
	dialogVisible.value = true;

	// 获取qrcode
	getQrcode(route.query.orderId as unknown as number).then((res) => {
		if (res.ok) {
			// qrcode 转二维码
			QRCode.toDataURL(res.data.codeUrl).then((daatUrl: string) => {
				imgURL.value = daatUrl;

				// 轮询支付结果
				timer = setInterval(() => {
					payResult(route.query.orderId as unknown as number).then((subres) => {
						if (subres.data) {
							dialogVisible.value = false;
							clearInterval(timer);
							getOrderInfoFn();
							ElMessage.success('支付成功');
						}
					});
				}, 2000);
			});
		}
	});
}

function onclosed() {
	imgURL.value = '';
	// 关闭时取消轮询
	clearInterval(timer);
}

getOrderInfoFn();
</script>

<style scoped lang="scss">
.box-card {
	margin: 40px 0;
	.text_red {
		color: red !important;
	}
	.title {
		font-size: 18px;
	}
	.top {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #e4e7ed;
		padding-bottom: 20px;
		.left {
			display: flex;
			align-items: center;
			.tag {
				display: inline-flex;
				align-items: center;
				font-size: 13px;
				.icon {
					margin-right: 4px;
				}
			}
		}

		.right {
			display: flex;
			img {
				width: 40px;
				height: 40px;
			}
			p {
				font-size: 14px;
				margin-left: 6px;
				width: 200px;
				color: #555;
			}
		}
	}
	.bottom {
		.patient_info_box {
			padding-top: 20px;
			.but {
				margin-top: 20px;
			}
		}

		.precautions {
			margin: 20px 0 20px 20px;
			border-radius: 4px;
			border: 1px solid #e4e7ed;
			box-shadow: 0 0 10px rgba(0, 0, 0, 8%);

			h3 {
				padding: 20px 0 20px 20px;
				border-bottom: 1px solid #e4e7ed;
			}
			ol {
				padding: 20px;
				list-style-position: inside;

				li {
					margin-bottom: 20px;
					color: #555;
					font-size: 15px;
				}
			}
		}
	}
	:deep(.el-dialog__body) {
		border-top: 1px solid #e4e7ed;
		border-bottom: 1px solid #e4e7ed;
	}
	.payment {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
		img {
			width: 256px;
			height: 256px;
		}
		p {
			margin-top: 10px;
		}
	}
}
</style>
